import React, { Component } from "react";

export default class App extends Component {
  state = {
    list: [{ id: 1, name: "87" }],
    myRef: React.createRef(),
  };
  render() {
    let newList = this.state.list.map((item) => (
      <li key={item.id}>
        {item.name} <button onClick={() => this.delClick(item)}>删除</button>
      </li>
    ));
    return (
      <section>
        <div>
          <input type="text" ref={this.state.myRef} />
          <button onClick={() => this.handleClick()}>添加</button>
        </div>
        <ul>{newList}</ul>
      </section>
    );
  }
  handleClick = () => {
    let arrList = [...this.state.list];
    arrList.push({
      id: Math.random() * 1,
      name: this.state.myRef.current.value,
    });
    this.state.myRef.current.value = "";
    this.setState({ list: arrList });
  };
  delClick = (v) => {
    console.log(v);
    let concatList = [...this.state.list];
    this.setState({
      list: concatList.filter((item) => item.id != v.id),
    });
  };
}
